<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>资源添加</title>
<link href="${ctx}/static/css/style.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/static/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx}/static/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/static/js/jquery.ztree.all-3.5.min.js"></script>
</head>
<style>
.forminfo li{overflow:hidden;}
.forminfo li label{float:left;height:32px;line-height:32px;}
.forminfo li .left{float:left;height:34px;line-height:32px;}
.forminfo li .abut{float:left;height:32px;line-height:32px;}
.forminfo li .sel{float:left;height:32px;line-height:32px;}
.select_sty{width:345px;height:32px;line-height:32px;border-top:solid 1px #a7b5bc;border-left:solid 1px #a7b5bc;border-right:solid 1px #ced9df;border-bottom:solid 1px #ced9df;}
</style>

<body>
	<div class="place">
	    <span>位置：</span>
	    <ul class="placeul">
		    <li><a href="#">系统管理</a></li>
		    <li><a href="#">资源添加</a></li>
	    </ul>
    </div>
    <div class="formbody">
	    <div class="formtitle"><span>资源添加</span></div>
	    <form action="${ctx}/resource/save" method="post" id="form">
	    	<ul class="forminfo">
	    	
		    <li><label>权限名称</label><input name="name" id="name" type="text"  class="dfinput" /> <i class="permissionNameMsg">权限名称不能超过30个字符</i></li>
		    <li>
		    	<label>权限类型</label>
			    <select name="type"  id="type" class="select_sty">
					<option value="1">子系统</option>
					<option value="2">模块</option>
					<option value="3">菜单</option>
					<option value="4">按钮</option>
				</select>
				<i class="permissionTypeMsg"></i>
		    </li>
		    <li><label>权限路径</label><input name="url" id="url" type="text" class="dfinput" /><i class="permissionPathMsg">根目录直接输入#，子目录以/*/*格式填写</i></li>
		    <li><label>排序</label><input name="sort" id="sort" type="text" class="dfinput" /><i class="sortMsg">请填写整数</i></li>
		    <li><label>权限</label><input name="permission" id="permission" type="select" class="dfinput" /><i class="permissionMsg"></i></li>
		    <!-- <li><label>状态</label>
			    <select name="cstate" id="cstate" class="sel select_sty">
					<option value="0">正常</option>
					<option value="1">停用</option>
				</select>
				<i class="cstateMsg"></i>
			</li> -->
		    <li>
			    <label>上级权限</label>
			    <div class="zTreeDemoBackground left">
					<ul class="list">
						<li class="title"><input id="resourceSel"  type="text" readonly value="" class="dfinput"/>
							<a id="menuBtn" href="#" onclick="showMenu(); return false;"style="padding-left:20px;"><strong></strong></a>
						</li>
						
					</ul>
				</div>
				<a class="abut" href="javascript:void(0)" onclick="clearResource()" ><strong>清空</strong></a>
			    <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
					<ul id="treeResource" class="ztree" style="margin-top:0; width:160px;background:#fff;"></ul>
				</div>
				<i class="parentPermissionMsg"></i>
		    </li>
		    <li style="margin-top:30px;"><label>&nbsp;</label><input name="" type="button" class="btn" value="确认保存"/></li>
		    </ul>
		    <input type="hidden" id="resource" name="parentId" ></input>
	    </form>
	</div>
	
	<div class="tip">
    		<div class="tiptop"><span>提示信息</span><a></a></div>
	      	<div class="tipinfo">
		        <div class="tipright">
			        <p class="errormMssage"></p>
		        </div>
		    </div>
	        <div class="tipbtn">
		        <input name="" type="button"  class="sure" value="确定" />&nbsp;
		        <input name="" type="button"  class="cancel" value="取消" />
        	</div>
    
    </div>
	
<script type="text/javascript">
	var setting = {
		view: {
			dblClickExpand: false,
			showLine: true,
            showIcon: false,
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onClick: onClick
		}
	};
	var zNodes = ${sysResourceTreeList};
	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeResource"),
		nodes = zTree.getSelectedNodes(),
		v = "";
		x ="";
		nodes.sort(function compare(a,b){return a.id-b.id;});
		for (var i=0, l=nodes.length; i<l; i++) {
			v += nodes[i].name + ",";
			x =+ nodes[i].id;
		}
		if (v.length > 0 ) v = v.substring(0, v.length-1);
		var cityObj = $("#resourceSel");
		cityObj.attr("value", v);
		$("#resource").val(x);
		$("#menuContent").fadeOut("fast");
	}
	
	$("#resourceSel").focus(function(){
		showMenu();
	});
	
	
	
	

	function showMenu() {
		var cityObj = $("#resourceSel");
		var cityOffset = $("#resourceSel").offset();
		$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

		//$("body").bind("mousedown", onBodyDown);
	}
	/* function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
			hideMenu();
		}
	} */

	$(document).ready(function(){
		$.fn.zTree.init($("#treeResource"), setting, zNodes);
	});
	//清空选择的上级目录
	function clearResource(){
		$("#resourceSel").val("");
	}
	
	//保存表单数据
	$('.btn').click(function(){
		var name = $("#name").val().replace(/\s/g,"");
    	var type = $("#type").val().replace(/\s/g,"");
    	var url = $("#url").val().replace(/\s/g,"");
    	var sort = $("#sort").val().replace(/\s/g,"");
    	var permission = $("#permission").val().replace(/\s/g,"");
    	var resourceSel = $("#resourceSel").val().replace(/\s/g,"");
    	if(null == name || name == ''){
    		$(".permissionNameMsg").html("权限名称不能为空！");
    		return false;
    	}
    	if(null == type || type == ''){
    		$(".permissionTypeMsg").html("类型不能为空！");
    		return false;
    	}
    	if(null == url || url == ''){
    		$(".permissionPathMsg").html("路径不能为空！");
    		return false;
    	}
    	if(null == sort || sort == ''){
    		$(".sortMsg").html("排序不能为空！");
    		return false;
    	}
    	/* if(null == permission || permission == ''){
    		$(".permissionMsg").html("权限不能为空！");
    		return false;
    	} */
    	if(null != name && name != '' && null != type && type != '' && null != url && url != '' && null != sort && sort != ''){
    		$("#form").submit();
    	}else{
    		$(".errorMessage").html("请填写不能为空的字段值！");
    		$(".tip").fadeIn(200);
    	}
	})
	
	
	
</script>
    
</body>

</html>

